<template>
  <div
    class="recommendCookbook"
    @click="toCookbook(item)"
    v-if="item.type == 1 && item"
  >
    <div class="header">
      <div class="left">
        <div class="avatar" @click.stop="toUser(item)">
          <van-image
            round
            width="34px"
            height="34px"
            :src="item?.r.a.p"
            lazy-load
          />
        </div>
        <div class="nickname">{{ item?.r.a.n }}</div>
        <div class="lv">LV.{{ item?.r.a.lvl }}</div>
      </div>
      <van-icon name="ellipsis" />
    </div>
    <div class="center">
      <van-image width="375px" height="auto" :src="item?.r.img" lazy-load />
    </div>
    <div class="footer">
      <div class="collect">
        <div class="left">
          <div
            class="user"
            v-for="(collect_user, index) in item.r.collect_users.slice(0, 4)"
            :key="index"
          >
            <van-image
              v-if="collect_user"
              round
              width="20px"
              height="20px"
              :src="collect_user.p"
              lazy-load
            />
          </div>
          <div class="count">{{ item.r.collect_count_text }}</div>
        </div>
        <van-icon
          v-if="!isCollect"
          name="star-o"
          size="25"
          @click.stop="doCollect(item.r.id)"
        />
        <van-icon
          v-else
          name="star"
          size="25"
          color="#ffc632"
          @click.stop="doCollect(item.r.id)"
        />
      </div>
      <div class="title">{{ item.r.n }}</div>
      <div class="events">
        <div
          class="event"
          v-if="item.r.events.length > 0"
          v-for="(event, index) in item.r.events"
          :key="index"
          @click.stop="toEvent"
        >
          <van-icon name="more-o" size="14" />
          <div class="c">
            {{ event.c }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="recommendCookbook"
    @click="toNote(item.note)"
    v-else-if="item.type == 3 && item"
  >
    <div class="header">
      <div class="left">
        <div class="avatar" @click.stop="toUser">
          <van-image
            round
            width="34px"
            height="34px"
            :src="item?.note.author.p"
            lazy-load
          />
        </div>
        <div class="nickname">{{ item?.note.author.n }}</div>
        <div class="lv">LV.{{ item?.note.author.lvl }}</div>
      </div>
      <van-icon name="ellipsis" />
    </div>
    <div class="center">
      <van-image
        width="375px"
        height="auto"
        :src="item?.note.image_u"
        lazy-load
      />
    </div>
    <div class="footer">
      <div class="collect">
        <div class="left" v-if="item.note">
          <div
            class="user"
            v-for="(collect_user, index) in item.note.collect_users.slice(0, 4)"
            :key="index"
          >
            <van-image
              v-if="collect_user"
              round
              width="20px"
              height="20px"
              :src="collect_user.p"
              lazy-load
            />
          </div>
          <div class="count">{{ item.note.like_count }}点赞</div>
        </div>
        <van-icon name="like-o" size="25" @click.stop="like" />
      </div>
      <div class="title">{{ item.note.title }}</div>
      <div class="events">
        <div
          class="event"
          v-if="item.note.events.length > 0"
          v-for="(event, index) in item.note.events"
          :key="index"
          @click.stop="toEvent"
        >
          <van-icon name="more-o" size="14" />
          <div class="c">
            {{ event.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { onMounted, type Ref, ref } from "vue";

const props = defineProps(["item"]);

const toCookbook = (e: object) => {
  // console.log("toCookbook");
  router.push({
    path: "/cookbook",
    query: { id: e.type == 1 ? e.r.id : e.note.id, user_id: e.r.a.id },
  });
};

const toNote = (e) => {
  // console.log("toNote");
  router.push({
    path: "/noteDetail",
    query: { id: e.id, user_id: e.author.id },
  });
};

const toUser = (e: object) => {
  // console.log("toUser", e.r.a.n);
  if (e.r.a.n != "用户已注销") {
    router.push({
      path: "/user",
      query: { id: e.r.a.id },
    });
  } else {
    window.alert("用户已注销");
  }
};

// console.log(props.item.r);

const isCollect = ref(false);
const doCollect = (id: number) => {
  // console.log("doCollect", id);
  let collects = ref(JSON.parse(localStorage.getItem("collect") || "[]"));
  if (collects.value.indexOf(String(id)) == -1) {
    collects.value.push(String(id));
    localStorage.setItem("collect", JSON.stringify(collects.value));
    isCollect.value = true;
  } else {
    localStorage.setItem(
      "collect",
      JSON.stringify(collects.value.filter((o: number) => o != id))
    );
    isCollect.value = false;
  }
};

const like = () => {
  console.log("like");
};

const toEvent = () => {
  console.log("toEvent");
};

onMounted(() => {
  if (localStorage.getItem("collect")) {
    if (props.item.r) {
      // console.log(props.item.r.id);
      if (
        JSON.parse(localStorage.getItem("collect")).indexOf(props.item.r.id) ==
        -1
      ) {
        isCollect.value = false;
      } else {
        isCollect.value = true;
      }
      // console.log(isCollect.value);
    }
  }

  if (props.item.r) {
    if (
      JSON.parse(localStorage.getItem("collect") || "[]").indexOf(
        String(props.item.r.id)
      ) != -1
    ) {
      isCollect.value = true;
    }
  }
});
</script>

<style lang="scss" scoped>
.recommendCookbook {
  margin-bottom: 10px;
  cursor: pointer;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;

    .left {
      display: flex;
      align-items: center;

      .avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      .nickname {
        height: 24px;
        line-height: 24px;
        margin-left: 8px;
        font-size: 18px;
      }

      .lv {
        margin-left: 10px;
        color: #c9a63b;
        font-style: italic;
      }
    }
  }

  .footer {
    padding: 19px 14px 0;

    .collect {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;

      .left {
        display: flex;
        align-items: center;

        .user {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          border: 1px solid white;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: -11px;
          position: relative;
          z-index: 2;
        }

        .user:first-of-type {
          margin-left: 0px;
        }

        .count {
          font-size: 13px;
          margin-left: 10px;
        }
      }
    }

    .title {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 10px;
    }

    .events {
      display: flex;
      align-items: center;

      .event {
        display: flex;
        align-items: center;
        color: #50969f;
        margin-right: 5px;

        .c {
          margin-left: 3px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
